<template>
	<!-- 登录页面的根视图，使用动态计算的高度样式 -->
	<view class="login" :style="{height:wh+'px'}">
		<!-- 显示上方的图片，此处可能是用来放置一些标题图片，但当前为空 -->
		<view class="title">
		</view>
		<!-- 下方的表单部分 -->
		<view class="content">
			<!-- 使用 uni-forms 组件进行表单处理，ref 用于获取表单元素引用，绑定表单数据和验证规则，验证触发时机为失去焦点时 -->
			<uni-forms ref="logForm" :model="logFormData" :rules="rules" validateTrigger="blur">
				<!-- 用户名输入项 -->
				<uni-forms-item name="name">
					<view class="input-with-icon">
						<!-- 用户名输入框的图标 -->
						<image src="/static/image/user.png" mode="aspectFit" class="input-icon"></image>
						<!-- 输入用户名的输入框，使用 uni-easyinput 组件并进行双向数据绑定 -->
						<uni-easyinput v-model="logFormData.name" placeholder="请输入名称" />
					</view>
				</uni-forms-item>
				<!-- 密码输入项 -->
				<uni-forms-item name="password">
					<view class="input-with-icon">
						<!-- 密码输入框的图标 -->
						<image src="/static/image/pass.png" mode="aspectFit" class="input-icon"></image>
						<!-- 输入密码的输入框，使用 uni-easyinput 组件并进行双向数据绑定，设置为密码类型 -->
						<uni-easyinput type="password" v-model="logFormData.password" placeholder="请输入密码" />
					</view>
				</uni-forms-item>
			</uni-forms>
			<!-- 登录按钮，点击时触发 login 函数 -->
			<button class="button" type="primary" @click="login">登录</button>
		</view>
		<!-- 下方的跳转注册信息 -->
		<view class="register">
			<!-- 使用 navigator 组件跳转到注册页面 -->
			<navigator url="/pages/register/register">还没有账号 ，点击注册</navigator>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		userStore
	} from '../../store/userStore.js';
	import {
		CONFIG
	} from '../../utils/config';

	// 获取用户状态存储实例
	let store = userStore();
	// 计算属性 wh 用于获取窗口的高度，用于设置登录页面的高度
	let wh = computed(() => {
		// 获取窗口信息并获取窗口高度
		let h = uni.getWindowInfo().windowHeight;
		console.log("h=" + h);
		return h;
	});

	// 表单数据的响应式引用，包含用户名和密码
	const logFormData = ref({
		name: '',
		password: ''
	});

	// 对 uni-forms 组件的引用
	const logForm = ref(null);

	// 验证规则的响应式引用，包含用户名和密码的验证规则
	const rules = ref({
		name: {
			rules: [
				// 用户名必填
				{
					required: true,
					errorMessage: '请输入名称'
				},
				// 用户名长度限制在 3 到 10 个字符之间
				{
					minLength: 3,
					maxLength: 10,
					errorMessage: '名称必须在{minLength}到{maxLength}个字符之间'
				},
				// 用户名只能包含数字、字母和下划线
				{
					pattern: '^\\w{3,10}$',
					errorMessage: '请输入3-10位数字字母和下划线作为名称'
				}
			]
		},
		password: {
			rules: [
				// 密码必填
				{
					required: true,
					errorMessage: '请输入密码'
				},
				// 密码必须是 3 到 10 位包含数字、字母和特殊字符的组合
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				}
			]
		}
	});

	// 登录函数
	function login() {
		// 对表单进行验证
		logForm.value.validate().then((res) => {
			// 构建请求参数
			let params = {
				name: logFormData.value.name,
				password: logFormData.value.password,
			};
			// 对参数进行 URI 编码
			let et = encodeURI(JSON.stringify(params));
			// 发送登录请求
			uni.request({
				url: `${CONFIG.leancloud_url}/1.1/classes/yonghu?where=${et}`,
				method: 'GET',
				success: (response) => {
					console.log(response);
					const res = response.data;
					console.log(res);
					// 如果请求结果不为空，表示用户存在
					if (res.results.length > 0) {
						// 显示登录成功的提示
						uni.showToast({
							title: "登录成功",
							icon: "success"
						});
						let user = res.results[0];
						console.log(user);
						// 将用户信息存储到状态存储中
						store.addUserInfo(user.name, user.password);
						// 导航回上一个页面
						uni.navigateBack();
					} else {
						// 显示用户不存在或密码错误的提示
						uni.showToast({
							title: "用户不存在或密码错误",
							icon: "none"
						});
					}
				},
				fail: (error) => {
					// 显示请求失败的提示并打印错误信息
					console.error("请求失败", error);
					uni.showToast({
						title: "请求失败",
						icon: "none"
					});
				}
			});
		}).catch(err => {
			// 显示验证失败的提示
			console.log("验证失败", err);
		});
	}
</script>
<style scoped>
	/* 登录页面的整体样式，设置边框、定位、布局、背景颜色和字体 */
	.login {
		border: 1px solid red;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		font-family: Arial, sans-serif;
		padding: 20px;
	}

	/* 登录页面中标题部分的样式，设置上外边距、布局和对齐方式 */
	.login.title {
		margin-top: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 登录页面中表单部分的样式，设置外边距、宽度、背景颜色、内边距、边框圆角和阴影 */
	.login.content {
		margin: 10px 20px;
		width: 80%;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* 登录页面中表单项的下边距 */
	.login.content uni-forms-item {
		margin-bottom: 15px;
	}

	/* 登录页面中带有图标的输入框的样式，设置布局、边框和内边距 */
	.login.content.input-with-icon {
		display: flex;
		align-items: center;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
	}

	/* 登录页面中输入框图标的样式，设置高度和右边距 */
	.login.content.input-icon {
		height: 20px;
		margin-right: 10px;
	}

	/* 登录页面中输入框的样式，使用 flex 布局占满剩余空间，不显示边框 */
	.login.content uni-easyinput {
		flex: 1;
		border: none;
	}

	/* 登录页面中按钮的样式，设置内边距、边框、背景颜色、颜色和鼠标悬停效果 */
	.login.content button {
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		background-color: #007aff;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.login.content button:hover {
		background-color: #0056b3;
	}

	/* 登录页面中注册信息的样式，设置定位、宽度、文本对齐、颜色、字体大小、下划线和鼠标悬停效果 */
	.login.register {
		position: absolute;
		bottom: 20px;
		width: 100vw;
		text-align: center;
		color: #007aff;
		font-size: 20rpx;
		text-decoration: underline;
		cursor: pointer;
	}

	.login.register:hover {
		color: #0056b3;
	}
</style>